'use strict'
import React from 'react'
import style from './css.css'
import Circle from './circle'
import { View, Button } from '../../component'

class Play extends React.Component {
  static propTypes = {
    hanleGameBtnStart: PropTypes.func,
    hanleGameBtnEnd: PropTypes.func,
    state: PropTypes.number
  }
  _touchStart = this._touchStart.bind(this)
  _touchEnd = this._touchEnd.bind(this)
  _touchStart (e, flag) { this.props.hanleGameBtnStart(flag) }
  _touchEnd (e, flag) { this.props.hanleGameBtnEnd(flag) }
  render () {
    return (
      <View className={ this.props.state === 2 ? style.playControl : style.hide } >
        <Button touchStart={(e) => { this._touchStart(e, 2) }} touchEnd={(e) => { this._touchEnd(e, 2) }} touchCancel={(e) => { this._touchEnd(e, 2) }} tapClassName={style.controlUpPress} className={style.controlUp}></Button>
        <Button touchStart={(e) => { this._touchStart(e, 3) }} touchEnd={(e) => { this._touchEnd(e, 3) }} touchCancel={(e) => { this._touchEnd(e, 3) }} tapClassName={style.controlDownPress} className={style.controlDown}></Button>
        <Button touchStart={(e) => { this._touchStart(e, 0) }} touchEnd={(e) => { this._touchEnd(e, 0) }} touchCancel={(e) => { this._touchEnd(e, 0) }} tapClassName={style.controlLeftPress} className={style.controlLeft}></Button>
        <Button touchStart={(e) => { this._touchStart(e, 1) }} touchEnd={(e) => { this._touchEnd(e, 1) }} touchCancel={(e) => { this._touchEnd(e, 1) }} tapClassName={style.controlRightPress} className={style.controlRight}></Button>
        <View className={style.controlGoBox} tap={ () => { this.props.hanleGameBtnStart(4) } }>
          <Circle />
          <Button className={style.controlGo} tapClassName={style.controlGoPress}></Button>
        </View>
      </View>
    )
  }
}

export default Play
